import React from 'react';
import NumberCounter from './unmberCounter';
import { Table } from 'antd';
import { useEffect, useState } from 'react';
import './index.scss'
import LineChart from '@/components/lineChart';
import { getStatisticCount, getMonthDataAPI, getRankDataAPI } from '@/request/statisitcs';
import { loadPayOrderList } from "@/request/order";
import { toThousands, formatMoney, formatWay, formatPayState } from "@/utils/tools"
import * as echarts from 'echarts' //全部导入 * as
import bgUrlOne from '@/assets/img/iconGreen.png'
import bgUrlTwo from '@/assets/img/iconYellow.png'
import bgUrlThree from '@/assets/img/iconPurple.png'
import bgUrlFour from '@/assets/img/iconPink.png'
import bgUrlFive from '@/assets/img/iconBlue.png'

const App = () => {

    //顶部数据展示
    const [total, setTotal] = useState<any>({
        currentCount: 0,  //今日交易量
        currentAmount: 0, //今日交易金额
        averagePrice: 0,  //今日平均单价
        totalMerchant: 0, //总商户数量
        sumAmount: 0, //统计的总交易金额
        totalCount: 0, //总交易单量
    })

    const getStatisticInfo = async () => {
        const res = await getStatisticCount() as any
        //  console.log('今日数据',res)
        setTotal({
            currentCount: res.data.currentCount,
            currentAmount: res.data.currentAmount,
            averagePrice: res.data.averagePrice,
            totalMerchant: res.data.totalMerchant,
            sumAmount: res.data.sumAmount,
            totalCount: res.data.totalCount,

        })
    }

    //获取排名数据
    const [rankList, setRankList] = useState<any>([])
    const getRankData = async () => {
        const res = await getRankDataAPI()
        setRankList(res)
        //  console.log(rankList)
    }

    //底部数据展示
    const [dataList, setDataList] = useState<any>([])

    const getData = async () => {
        const params = {
            limit: 3,
            page: 1,
            total: 0
        }
        const res = await loadPayOrderList(params)
        setDataList(res.data.list)
        // console.log(dataList)
    }

    const columns = [
        {
            title: '支付订单',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '商家名称',
            dataIndex: 'merchantNames',
            key: 'merchantNames',
        },
        {
            title: '交易金额',
            dataIndex: 'totalAmount',
            key: 'totalAmount',
            sorter: (a, b) => a.totalAmount - b.totalAmount,
            render: (v) => (formatMoney(v))
        },
        {
            title: '支付方式',
            dataIndex: 'payType',
            key: 'payType',
            render: (v) => (formatWay(v))
        },
        {
            title: '订单状态',
            dataIndex: 'payState',
            key: 'payState',
            render: (v) => (formatPayState(v))
        },
        {
            title: '订单创建时间',
            dataIndex: 'orderDate',
            key: 'orderDate',
        },
    ];


    useEffect(() => {
        getStatisticInfo()
        getData()
        getRankData()
        //柱状
        const getMonthData = async () => {
            const res = await getMonthDataAPI()
            // console.log('res', res)
            // 找到最大值
            var max = Math.max(...res);
            // 找到最小值
            var min = Math.min(...res);
            // 找到最大值的索引
            var maxIndex = res.indexOf(max);
            // 找到最小值的索引
            var minIndex = res.indexOf(min);
            // 计算平均数
            var sum = res.reduce((acc, curr) => acc + curr, 0);
            var average = sum / res.length;
            // console.log(max,maxIndex,min,minIndex,average)
            // 基于准备好的dom，初始化echarts实例
            const myChart = echarts.init(document.getElementById('chart'))

            // 绘制图表
            myChart.setOption({
                color: ['#3f9b6a'],
                title: {
                    text: '月交易金额',
                    subtext: ''
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['月交易金额(元)']
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['line', 'bar'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                xAxis: {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: res,
                        name: '月交易金额(元)',
                        type: 'line',
                        smooth: true,
                        markPoint: {
                            data: [
                                { name: 'Max', value: res[maxIndex], xAxis: maxIndex, yAxis: max },
                                { name: 'Min', value: res[minIndex], xAxis: minIndex, yAxis: min }
                            ]
                        },
                    }
                ]
            })
        }
        getMonthData() //调用折线图函数
    }, [])


    return (
        <div className='contain'>
            <div className='topBox'>
                <div className='topInfo'>
                    <div>总交易金额</div>
                    <div className='numberBox'>
                        <div><NumberCounter targetNumber={total.sumAmount / 100} /> <span>元</span></div>
                        <div><img src={bgUrlOne} alt="" className='iconImg' /></div>
                    </div>
                </div>
                <div className='topInfo'>
                    <div>总交易单量</div>
                    <div className='numberBox'>
                        <div> <NumberCounter targetNumber={total.totalCount} /> <span></span></div>
                        <div><img src={bgUrlTwo} alt="" className='iconImg' /></div>
                    </div>
                </div>
                <div className='topInfo'>
                    <div>总交易商户数</div>
                    <div className='numberBox'>
                        <div><NumberCounter targetNumber={total.totalMerchant} /> </div>
                        <div><img src={bgUrlFive} alt="" className='iconImg' /></div>
                    </div>
                </div>
                <div className='topInfo'>
                    <div>今日交易总金额</div>
                    <div className='numberBox'>
                        <div><NumberCounter targetNumber={total.currentAmount / 100} /> <span>元</span></div>
                        <div><img src={bgUrlThree} alt="" className='iconImg' /></div>
                    </div>
                </div>
                <div className='topInfo'>
                    <div>今日单量</div>
                    <div className='numberBox'>
                        <div><NumberCounter targetNumber={total.currentCount} /> <span></span></div>
                        <div><img src={bgUrlFour} alt="" className='iconImg' /></div>
                    </div>
                </div>
            </div>

            <div className='centerBox'>
                <div className='centerLeft'>
                    <div id="chart" className='echartBox'></div>
                </div>
                <div className='centerRight'>
                    <div className='rankTitle'>商家交易额排行(元)</div>
                    <div className='rankBox'>
                        <div className='rankInfo'>
                            <div className='rankName'><span className='circle'>1</span><span className='merchart'>{rankList[0]?.merchantName}</span></div>
                            <div className='rankNum'>{rankList[0]?.amount}</div>
                        </div>
                        <div className='rankInfo'>
                            <div className='rankName'><span className='circle' style={{ backgroundColor: '#e0f0fb', color: '#77a2c6' }}>2</span><span className='merchart'>{rankList[1]?.merchantName}</span></div>
                            <div className='rankNum'>{rankList[1]?.amount}</div>
                        </div>
                        <div className='rankInfo'>
                            <div className='rankName'><span className='circle' style={{ backgroundColor: '#fae4df', color: '#e09478' }}>3</span><span className='merchart'>{rankList[2]?.merchantName}</span></div>
                            <div className='rankNum'>{rankList[2]?.amount}</div>
                        </div>
                        <div className='rankInfo'>
                            <div className='rankName'><span className='circle' style={{ backgroundColor: '#eef1f8', color: '#74809f' }}>4</span><span className='merchart'>{rankList[3]?.merchantName}</span></div>
                            <div className='rankNum'>{rankList[3]?.amount}</div>
                        </div>
                        <div className='rankInfo'>
                            <div className='rankName'><span className='circle' style={{ backgroundColor: '#eef1f8', color: '#74809f' }}>5</span><span className='merchart'>{rankList[4]?.merchantName}</span></div>
                            <div className='rankNum'>{rankList[4]?.amount}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div className='bottomBox'>
                <div className='orderTitle'>最近交易订单</div>
                <Table dataSource={dataList} columns={columns} pagination={false} rowKey="id" />
            </div>
        </div>
    )
}

export default App